<template>
  <div class="header" id="headerPart">
    <div class="menu column-top">
      <i class='el-icon-menu' v-if="hasPerms('bots:manage:menu')" @click='openMenu'></i>
    </div>
    <div class="logo column-top" >
      <img src="../../../../assets/images/logo.png" alt="">
    </div>
    <div class="user column-top">
      <el-dropdown>
        <div class="userinfo">
          <span style="color:floralwhite; padding-right: 10px">
            在线人数: {{numberCount}}
          </span>
          <span>
            欢迎您登录本系统！
          </span>
           <i class="iconfont icon-yiliaohangyedeICON-"></i>
        </div>
        <el-dropdown-menu slot="dropdown" style="cursor: pointer">
<!--          <el-dropdown-item @click.native="handleHome">首页</el-dropdown-item>-->
          <el-dropdown-item v-if="hasPerms('bots:manage:permission')" @click.native="handdleRouter">系统管理</el-dropdown-item>
          <el-dropdown-item @click.native="changePassword">修改密码</el-dropdown-item>
          <el-dropdown-item @click.native="handleLoginOut">退出登陆</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!-- <span>欢迎您！admin</span>
      <img src='../../../../assets/images/user.png' alt /> -->
    </div>
    <left-menu ref='menus' />
    <change-password ref="changePsd"/>
  </div>
</template>

<script>
import {logout} from '@/api/user'
import Cookies from 'js-cookie'
import { hasPermission } from '@/permission/index.js'
import ChangePassword from './Changepassword'
import { userCount } from '@/api/index'
export default {
  data () {
    return {
      menuList: [],
      timer: null,
      numberCount: '0'
    }
  },
  components: {
    'LeftMenu': () => import('../menus'),
    ChangePassword
  },
  created () {
    this.userCount()
    this.timer = setInterval(this.userCount, 10000)
  },
  beforeDestroy  () {
    clearInterval(this.timer)
  },
  destroyed () {
    clearInterval(this.timer)
  },
  methods: {
    async userCount () {
      const data = await userCount()
      if (data) {
        if (data.code === 200) {
          this.numberCount = data.data
          sessionStorage.setItem('userCount', data.data)
        }
      }
    },
    // 修改密码
    changePassword () {
      this.$refs.changePsd.init(true)
    },
    hasPerms: function (perms) {
      // 根据权限标识和外部指示状态进行权限判断
      // return true
      return hasPermission(perms) & !this.disabled
    },
    handleHome () {
      this.$router.push('/index')
    },
    handdleRouter () {
      const authorization = Cookies.get('authorization')
      window.open(`${window.SITE_CONFIG['url']}/#/list?token=${authorization}&JSESSIONID=${authorization}`)
    },
    handleLoginOut () {
      this.$confirm('确认退出吗?', '提示', {
        type: 'warning'
      })
        .then(() => {
          logout().then(res => {
            this.clearData(res.data)
          })
        })
        .catch(() => {})
    },
    // 清除数据
    clearData () {
      Cookies.remove('token')
      Cookies.remove('authorization')
      this.$router.push('/login')
    },
    openMenu () {
      this.$refs.menus.init()
    }
  }
}
</script>
